
let MovableAreaWidth = 0
let BarWidth = 0;
//背景音乐管理器
const  backgroundAudioManager = wx.getBackgroundAudioManager()
let duration = 0
let currentSec = -1;
let isMoving = false  //进度条是否在拖拽, 解决：进度条拖拽时与timeupdate 冲突的问题
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    isSame:Boolean
  },

  /**
   * 组件的初始数据
   */
  data: {
    movableDis:0,
    showTime:{
      currentTime:'00:00',
      totalTime:'00:00'
    },
    progress:0
  },
  lifetimes:{
    created(){
      //点击的是同一首歌
      console.log(this.properties.isSame);
      console.log(this.data.showTime.totalTime == '00:00');
      if(this.properties.isSame && this.data.showTime.totalTime == '00:00'){
        this._setTime();
        
      }
      this._bindBGMEvent()
    },
    ready(){
      this._getMovalbDis()
    }
  },

  /**
   * 组件的方法列表
   */
  methods: {
    //进度条进度变化时触发的函数  setData设置的值时：source:""；拖动时：source:"touch"
    onChange(event){
      if(event.detail.source == 'touch'){
        this.data.progress = event.detail.x / (MovableAreaWidth - BarWidth) *100;
        this.data.movableDis = event.detail.x
        isMoving = true
      }
    },
    //拖动松开时触发的函数
    onTouchEnd(){
      let curTime = this.timeFormat(backgroundAudioManager.currentTime);
      this.setData({
        movableDis:this.data.movableDis,
        progress:this.data.progress,
        ['showTime.currentTime']: `${curTime.min}:${curTime.sec}`
      })
      backgroundAudioManager.seek(this.data.progress * duration /100);
      isMoving = false;
    },
    _getMovalbDis(){
      const query = this.createSelectorQuery();
      query.select('.movable-area').boundingClientRect();
      query.select('.bar').boundingClientRect();
      query.exec((rect)=>{
        MovableAreaWidth = rect[0].width;
        BarWidth = rect[1].width;
      })
    },
    _bindBGMEvent(){
      backgroundAudioManager.onCanplay(()=>{
        // console.log('onCanplay');
        wx.hideLoading()
      })
      backgroundAudioManager.onPlay(()=>{
        console.log('onPlay');
        this.triggerEvent('musicPlay')
        wx.hideLoading()
        isMoving = false;
        if(!duration){
          if(typeof backgroundAudioManager.duration == 'undefined'){
            this._setTime()
          }else{
            setTimeout(()=>{
              this._setTime()
            },1000)
          }
        }else{
          this._setTime()
        }
      })
      backgroundAudioManager.onWaiting(()=>{
        // console.log('onWaiting');
        // wx.showToast({
        //   title: '当前网络缓慢',
        //   icon:'error',
        //   mask:true
        // })
      })
      backgroundAudioManager.onPause(()=>{
        console.log('onPause');
        this.triggerEvent('musicPaused')
      })
      backgroundAudioManager.onEnded(()=>{
        // console.log('onEnded');
        this.triggerEvent('musicEnd');
      })
      backgroundAudioManager.onTimeUpdate(()=>{
        if(!isMoving){
          let currentTime = backgroundAudioManager.currentTime;
          let duration = backgroundAudioManager.duration;
          let cur = currentTime.toString().split('.')[0]
          if(cur != currentSec){
            let curTime = this.timeFormat(currentTime)
           this.setData({
            ['showTime.currentTime']: `${curTime.min}:${curTime.sec}`,
            movableDis: (currentTime / duration) * (MovableAreaWidth-BarWidth),
            progress: (currentTime / duration) *100
          })
          currentSec = cur
          //联动歌词
          this.triggerEvent('timeUpdate',{
            currentTime
          })
          }
          
        }
      })
      backgroundAudioManager.onError((error)=>{
        // console.log('onError');
        console.log(error);
      })
    },
    _setTime(){
      duration  = backgroundAudioManager.duration;
      let totaltime = this.timeFormat(duration)
      this.setData({
        ['showTime.totalTime']: `${totaltime.min}:${totaltime.sec}`
      })
    },
    timeFormat(sec){
      let min = Math.floor(sec/60);
      sec = Math.floor(sec%60);
      return{
        'min':min<10?'0'+min:min,
        'sec':sec<10?'0'+sec:sec
      }
    }
  }
})
